import React, { useRef } from 'react'
import Head from './components/head/index'
import QualityText from './components/qualityText/index'
import InsuranceText from './components/insuranceText/index'
import UserAgreement from './components/userAgreement/index'
const App = React.forwardRef((props, ref) => {
  const HeadRef = useRef(null)
  const QualityTextRef = useRef(null)
  const InsuranceTextRef = useRef(null)
  const UserAgreementRef = useRef(null)
  const getAllList = () => {
    setTimeout(() => {
      HeadRef.current.handleChildMethod()
      QualityTextRef.current.handleChildMethod()
      InsuranceTextRef.current.handleChildMethod()
      UserAgreementRef.current.handleChildMethod()
    })
  }
  const handleChildMethod = () => {
    getAllList()
  }

  React.useImperativeHandle(ref, () => ({
    handleChildMethod
  }))
  return (
    <div>
      <Head ref={HeadRef} />
      <QualityText ref={QualityTextRef} />
      <InsuranceText ref={InsuranceTextRef} />
      <UserAgreement ref={UserAgreementRef} />
    </div>
  )
})
export default App
